<template>
	<view class="content">
		<uni-nav-bar title="签到中心" left-icon="back" @clickLeft="$tab.back(0)" :fixed="true" :border="false"
			:statusBar="true" backgroundColor="transparent"></uni-nav-bar>

		<view class="nav" v-if="detail">
			<view class="flex items-end ml-12">
				<view class="font-700" style="font-size: 80rpx;">
					{{goldValue}}
				</view>
				<view class="pb-12 ml-12">
					个熵豆
				</view>
			</view>

			<view class="btn mt-28 text-center text-FFF ml-12" @click="handleQiandao">
				{{detail.signedToday == 1 ? '已签到' : '立即签到'}}
			</view>
			
			<div class="qiaodao-nav-wrap mt-28 px-16 flex items-center justify-between">
				<div class="flex flex-col items-center" v-for="(item,index) in weekArr" :key="index+1">
					<div class="qiandao-nav-li flex flex-col items-center justify-around">
						<div class="text-24" style="color: #FF9734;">{{item.amount}}元</div>
						<div class="text-20" style="color: #FF9734;">熵豆</div>
						<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages5/${item.sign ? 'icon_yiqiandao' : 'icon_weiqiandao'}@2x.png`" class="image-32" mode=""></image>
					</div>
					<div class="mt-12">
						{{item.week}}
					</div>
				</div>
			</div>
		</view>

		<view class="px-20" style="position: relative;top: -176rpx;">
			<view class="round-24 bg-FFF px-28" style="min-height: 800rpx;">
				<view class="flex items-center justify-around py-32">
					<view class="flex items-center">
						<view class="xian">

						</view>
						<view class="text-9E9E9E mx-12">
							每日签到都可得奖励
						</view>
						<view class="xian">

						</view>
					</view>
				</view>


				<view class="text-36 font-700">
					签到记录
				</view>

				<view class="mt-44">
					<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
						<view class="" v-for="(item,index) in list" :key="item.id">
							<view class="flex items-center justify-between">
								<view class="">
									<view class="">
										签到送{{item.moneyName}}
									</view>
									<view class="text-24 text-9E9E9E mt-12">
										{{item.signTime | timeFun('YYYY-MM-DD hh:mm:ss')}}
									</view>
								</view>
								<view class="text-32" style="color: #FF200A;">
									+{{item.amount}}
								</view>
							</view>

							<u-divider></u-divider>
						</view>
					</s-pull-scroll>
				</view>
			</view>
		</view>

		<u-popup :show="qiandaoShow" @close="qiandaoShow = false" :safe-area-inset-bottom="false" mode="center"
			:round="10">
			<view class="study-wrap p-32 relative">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/icon_quxiao@2x.png" mode=""
					class="study-close" @click="qiandaoShow = false"></image>


				<input type="text" class="study-input" placeholder="请输入验证码" v-model="convertNo" />

				<view class="study-btn text-center text-FFF text-32" @click="confirm">
					确认签到
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				list: [],
				detail: null,
				convertNo: "",

				qiandaoShow: false,
				isCode:'1',
				goldValue:null,
				weekArr:[]
			};
		},
		onLoad() {
			thro = this
			this.getData()
			this.refresh()
		},
		methods: {
			handleQiandao(){
				if(this.isCode == '1'){
					this.qiandaoShow = true
				}else{
					this.confirm()
				}
			},
			confirm: throttle(2000, async () => {
				if (thro.detail.signedToday == 0) {
					const res = await thro.$Api.index.signLogSign({
						convertNo: thro.convertNo
					})
					thro.qiandaoShow = false
					thro.getData()
					thro.refresh()
				}
			},{
				noTrailing:true
			}),
			async getData() {
				const res = await this.$Api.index.signLogInfo()
				console.log(res)
				this.detail = res.data
				
				
				const res2 = await this.$Api.index.signInfoWeek()
				console.log(res2)
				this.weekArr = res2.data
				
				const userRichInfo = await this.$Api.user.userRichInfo()
				userRichInfo.data.forEach(item => {
					switch (item.moneyId) {
						case 12:
							this.goldValue = item.amount
							break
					}
				})
				
				const isCode = await this.$Api.common.configInfo({
					key:"sign_need_convert"
				})
				
				console.log(isCode)
				this.isCode = isCode.data.configValue
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const res = await this.$Api.index.signLogList({
						pageSize: 10,
						pageNum: pullScroll.page
					})

					this.list = this.list.concat(res.rows || []);

					if (this.list.length == 0) {
						pullScroll.empty();
					}

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	/deep/ .uni-navbar {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}

	.study-input {
		width: 594rpx;
		height: 92rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		line-height: 92rpx;
		text-align: center;
	}

	.study-close {
		position: absolute;
		right: -32rpx;
		top: -32rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.study-btn {
		width: 594rpx;
		height: 92rpx;
		background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
		border-radius: 152rpx 152rpx 152rpx 152rpx;
		line-height: 92rpx;
		margin-top: 52rpx;
	}

	.nav {
		height: 800rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/signIn-bg.png) no-repeat;
		background-size: 100% 100%;
		padding: 198rpx 20rpx 0 20rpx;
		
		.qiaodao-nav-wrap{
			height: 208rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			.qiandao-nav-li{
				width: 80rpx;
				height: 108rpx;
				background: #F0F0F0;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
	}

	.btn {
		width: 186rpx;
		height: 64rpx;
		background: linear-gradient(90deg, #FF1306 0%, #FF9734 100%);
		border-radius: 39rpx 39rpx 39rpx 39rpx;
		border: 2rpx solid #FFF41D;
		line-height: 64rpx;
	}

	.xian {
		width: 48rpx;
		height: 2rpx;
		background-color: #D8D8D8;
	}
	
	
</style>